<template>
	<view>
		<view class="box">
			<view class="menu_content_box_page">
				<view class="pa15">
					<view class="mt15 area_block_3">
						<view class="flex_box">
							<view class="re mr25">
								<image:src="detail.imgUrl" class="img17 vt" mode="aspectFill"></image> 					</view>
							<view class="item">
								<view class="df fldc jcsb hp100">
									<view class="fs28 lh34 cor_333 ell">{{detail.title}}</view>
									<view class="fs22 lh26 cor_808">{{detail.introduce}}</view>
									<view class="flex_box aic">
										<view class="item">
											<view class="fs30 fwb cor_F23"><text class="fs34">￥{{detail.price}}</text></view>
										</view>
										<view class="ml5 fs22 fwb cor_808">{{detail.num}}人付款</view>
									</view>
								</view>
							</view>
						</view>
					</view><!-- area_block_3 -->

					<!-- 全部评价 -->
					<!-- 评价 -->
					<view class="mt20 pt35 pl20 area_block_1">
						<view class="flex_box aic">
							<view class="item fs32 cor_000">评价（<text class="">{{commNum}}</text>）</view>
					<!-- 		<view class="vh see_btn">查看全部</view> -->
						</view>
						<view class="pl10 pr30">

							<view class="pt25 pb25" v-for="item,index in commentList" :key="index">
								<view class="flex_box aic">
									<view class="mr20 re">
										<image:src="item.userIcon" class="vt img24" mode="aspectFill"></image> 									</view>
									<view class="item">
										<view class="flex_box aic">
											<view class="item">
												<view class="fs24 cor_000">{{item.userName}}</view>
											</view>
											<view class="fs24 cor_808">{{item.date}}</view>
										</view>
										<view class="mt15 df aic">
											<uni-rate :value="item.stars" allow-half :readonly="true" color="#bbb" :size="12"  active-color="red" />
										</view>
									</view>
								</view>
								<view class="mt20 fs24 lh38 cor_000">{{item.text}}</view>
							</view>

							
						</view>
					</view><!-- 评价 -->

				</view>
			</view>
		</view><!-- box -->
	</view>
</template>

<script>
	
	import { toast, showLoading, hideLoading } from '@/utils/toast.js';
	import { getCommPageApi } from '@/http/api.js';
	export default {
		data() {
			return {
				detail: {},
				commNum: 0,
				commentList: [],
				id: 0,
				pageIndex: 1,
				pageSize: 10
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getCommPage();
		},
		onReachBottom() {
			this.getCommPage();
		},
		methods: {
			getCommPage() {
				let that = this;
				showLoading('加载中');
				getCommPageApi({
					id: this.id,
					pageIndex: this.pageIndex,
					pageSize: this.pageSize
				}).then(res=>{
					that.detail = res.data.datumItem;
					if (res.data.page.data.length == that.pageSize) {
						that.pageIndex = res.data.page.currentPage + 1;
					}
					for (let i in res.data.page.data) {
						that.commentList.push(res.data.page.data[i]);
					}
					that.commNum = res.data.commNum;
					hideLoading();
				}).catch(err=>{
					toast(err.msg);
					hideLoading();
				})
			}
		}
	}
</script>

<style>
	.menu_content_box_page {
		position: relative;
		/* height: 100vh; */
		background-color: #f7f6f6;
	}

	.area_block_1 {
		position: relative;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.area_block_3 {
		position: relative;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.see_btn {
		padding: 0 12rpx;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 22rpx;
		color: #fff;
		text-align: center;
		background-image: linear-gradient(90deg, #f46933, #e3140b);
		border-radius: 24rpx 0 0 24rpx;
	}
</style>
